<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/static/css/order.css">
</head>
<style>
</style>
<body>
<div class="layui-fluid">
    <fieldset class="layui-elem-field">
        <legend><a class="back" lay-href="{:url('Product/order')}">订单管理</a> - 订单详情</legend>
        <div class="layui-field-box">
            <div class="layui-card">
                <div class="layui-card-header">订单详情
                    <button class="layui-btn layui-btn-sm" style="float: right;margin-top: 6px;" onclick="javascript:history.back(-1);">返回</button>
                </div>
                <div class="layui-card-body" pad15>
                    <div class="layui-form" wid100 lay-filter="">
                        <blockquote class="layui-elem-quote quote">基本信息</blockquote>
                        <div class="jiben">
                            <div class="zuobian">
                                <div class="xinxi">
                                    下单用户 : {$user.name|base64_decode=###} {$user.phone ? '(' . $user.phone . ')' : ''}
                                </div>
                                <div class="xinxi">
                                    订单号　 : {$find.order}
                                </div>
                                <div class="xinxi">
                                    订单状态 :
                                    {switch name="find.status" }
                                    {case value="0"}待付款{/case}
                                    {case value="1"}待发货{/case}
                                    {case value="2"}待收货{/case}
                                    {case value="3"}已完成{/case}
                                    {case value="4"}已关闭{/case}
                                    {case value="5"}退款{/case}
                                    {case value="6"}活动中{/case}
                                    {case value="7"}到店领取{/case}
                                    {default /}待付款
                                    {/switch}
                                </div>
                                <div class="xinxi">
                                    用户留言 : {$find.message ? '<span style="color: #ca0d0d;">' . $find.message . '</span>' : '暂无留言'}
                                </div>
                            </div>
                            <div class="youbian">
                                <div class="delivery">
                                    <div class="xinxi">
                                        收件人 : {$find.username}
                                    </div>
                                    <div class="xinxi">
                                        电　话 : {$find.phone}
                                    </div>
                                    <div class="xinxi">
                                        地　址 : {$find.address}
                                    </div>
                                </div>
                                <div class="price">
                                    <div class="xinxi">
                                        应付总额 : {$find.money - $find.benefit}元 {if condition="$find.status eq '0'"}<a class="xiugai" data-id="{$find.id}">修改总额</a>{/if}
                                    </div>
                                    <div class="xinxi">
                                        优惠金额 : {$find.benefit ? $find.benefit : '0.00'}元
                                    </div>
                                    <div class="xinxi">
                                        运　　费 : {$find.freight ? $find.freight : '0.00'}元
                                    </div>
                                </div>
                            </div>
                        </div>
                        <blockquote class="layui-elem-quote quote">备注日志 <span class="addbei" data-id="{$find.id}">添加备注</span></blockquote>
                        <div class="beizhu">
                            <ul class="layui-timeline">
                                {volist name='remark' id='vo' empty="暂无数据"}
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis"></i>
                                    <div class="layui-timeline-content layui-text">
                                        <h3 class="layui-timeline-title">
                                            {$vo.time|date='Y-m-d H:i:s', ###}
                                            <span class="ren">[{if condition="$Think.session.NAME eq $vo.user"}我{else /}{$vo.user}{/if}]</span>
                                            <span class="delbei" data-id="{$vo.id}">{if condition="$vo.type eq '1'"}删除{/if}</span>
                                        </h3>
                                        <p>
                                            {$vo.info}
                                            {if condition="$vo.remark"}
                                            <br>原因: {$vo.remark}
                                            {/if}
                                        </p>
                                    </div>
                                </li>
                                {/volist}
                            </ul>
                        </div>
                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th>商品</th>
                                <th class="center" width="60">单价</th>
                                <th class="center" width="100">商品数量</th>
                                <th class="center" width="120">小计</th>
                            </tr>
                            </thead>
                            <tbody>
                            {volist name='find.lower' id='vo'}
                            <tr>
                                <td>
                                    <div class="flex2">
                                        <img class="img" src="/uploads/{$vo.img}" title="{{d.name}}" style="width: 60px;height: 60px;cursor: pointer;">
                                        <div class="info">
                                            <div class="inline">{$vo.name}</div>
                                            <div class="spec">规格/型号 : {$vo.spec ? $vo.spec : '无规格型号'}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="center ups">{$vo.unit} 元</td>
                                <td class="center ups">{$vo.num} 件</td>
                                <td class="center ups">{$vo.unit*$vo.num} 元</td>
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                        <blockquote class="layui-elem-quote quote">物流信息</blockquote>
                        <div class="wuliu">
                            当前订单暂无物流信息
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</div>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'useradmin', 'table'], function(){
        var $ = layui.$,
                form = layui.form,
                table = layui.table;

        //点击放大图片
        $(document).on('click', '.img', function (){
            var img = $(this).attr('src');
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: ['auto', 'auto'],
                offset: ['20%', '30%'],
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: '<img src="'+img+'" style="width: 400px;height: 400px;">'
            });
        });

        //修改总价格
        $(".xiugai").click(function (){
            var id = $(this).data('id');
            layer.open({
                type: 2
                ,title: '修改总价格'
                ,content: '/admin/Product/order_edit/id/' + id
                ,offset: ['20%', '32%']
                ,area: ['400px', '350px']
                ,btn: ['确定', '取消']
                ,yes: function(index, layero){
                    //点击确认触发 iframe 内容中的按钮提交
                    var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                    submit.click();
                }
            });
        });

        //添加备注
        $(".addbei").click(function (){
            var id = $(this).data('id');
            layer.prompt({
                formType: 2,
                value: '请填写备注内容，200字以内',
                title: '添加备注',
                offset: ['25%', '30%'],
                area: ['400px', '150px']
            }, function(value, index, elem){
                $.post("{:url('Product/order_remark')}", {id:id,value:value}, function (e){
                    if (e == 1){
                        layer.msg('修改成功', {offset: ['30%', '40%']});
                        setTimeout(function () {
                            location.reload(); //重载表格
                        }, 500)
                    }else{
                        layer.msg('修改失败', {offset: ['30%', '40%']});
                    }
                });
            });
        });

        //删除备注
        $(".delbei").click(function (){
            var id = $(this).data('id');
            $.post("{:url('Product/remark_del')}", {id:id}, function (e){
                if (e == 1){
                    layer.msg('删除成功', {offset: ['30%', '40%']});
                    setTimeout(function () {
                        location.reload(); //重载表格
                    }, 500)
                }else{
                    layer.msg('删除失败', {offset: ['30%', '40%']});
                }
            });
        });
    });

</script>
</body>
</html>
